<template>
    <div class="lianxi">
         <header>
        	<ul>
        		<li><img v-bind:src="wdycImg" width="20" height="40"></li>
        		<li>{{wdycText}}</li>
        		<li></li>
        	</ul>
        </header>
        <section>
        	<div class="section-top">
	        	<ul>
	        		<li  v-for="(tab,index) in tabs" @click="tabIndex = index"
	        		:class="{active:tabIndex == index}">{{tab.text}}</li>
	        	</ul>
	        </div>
        	<div  class="haowu"  v-show="tabIndex == 0">
        		<div class="bigbox">
        			<img v-bind:src='myimg'>
	        		<div class="love">
	        			<ul>
		        			<li v-for='info in infos'>{{info.text}}</li>
		        		</ul>
		        	</div>
        		</div>
        		<div class="box">
        			<img v-bind:src='myimgs'>
	        		<div class="loves">
	        			<ul>
		        			<li>{{msg}}</li>
		        		</ul>
		        	</div>
        		</div>
        	</div>
        	<div class="section-image"  v-show="tabIndex == 1">
        		 <ul>
	        		<li><img v-bind:src="wdycImgTwo"></li>
	        		<li>{{wdycTextTwo}}</li>
	        	</ul>
        	</div>
        	<div  class="section-imgs" v-show="tabIndex == 2">
        		<ul>
	        		<li><img v-bind:src="wdycImgTwo"></li>
	        		<li>{{modo}}</li>
	        	</ul>
        	</div>
        </section>    
    </div>
</template>

<script>
export default {
  name: 'lianxi',
  data () {
    return {
    	tabIndex:0,
    	wdycImg:'../../static/img/fanhiu.png',
    	wdycText:'我的收藏',
    	tabs:[
    		{text:'好物'},
    		{text:'文章'},
    		{text:'晒单'},
    	],
    	wdycImgTwo:'../../static/img/shoushi.png',
    	wdycTextTwo:'你收藏的文章在这里',
    	modo:'暂无晒单!',
    	myimg:"../static/img/haowu-logo1.png",
    	infos:[
    		{text:'我的喜欢'},
    		{text:'0 好物'}
    	],
    	myimgs:"../static/img/haowu-logo2.png",
    	msg:'创建新的心愿单'
    }
    } 
}
</script>


<style scoped lang="less">
 @import url(../assets/less/wodeshoucang.less);
</style>
